<template>
	<!-- 搜索框导航 -->
	<section class="serach-nav">
		<div class="serach-nav-box">
			<!-- logo -->
			<!-- <div
        class="logo"
        style="font-family: 'STXingkai', Courier, monospace; font-size: 20px"
      >
        清一色商城
      </div> -->
			<div class="logo">
				<img src="../../assets/images/logo1.png" alt="" style="width: 56px; height: 56px" />
			</div>
			<!-- 中间菜单 -->
			<div class="search-menu">
				<div class="middle">
					<div v-for="item in this.$store.state.product.list" :key="item.id">{{ item.name }}
					</div>
				</div>
			</div>
			<!-- 搜索框 -->
			<div class="serach-border">
				<div class="serach-box">
					<div class="search-input">
						<input placeholder="请输入商品名字" v-model="searchValue" />
					</div>
					<div class="search-btn" @click="toSearch()">
						<el-button>
							<el-icon style="font-size: 25px">
								<search></search>
							</el-icon>
						</el-button>
					</div>
				</div>
			</div>
		</div>
	</section>
</template>

<script>
	import {
		Search
	} from "@element-plus/icons";
	import {
		ref
	} from "@vue/reactivity";
	import {
		useRouter
	} from "vue-router";
	import {
		useStore
	} from "vuex"
	export default {
		components: {
			Search
		},
		setup() {
			//使用状态管理
			const store = useStore();
			//文本框的内容
			const searchValue = ref("")
			//路由
			const router = useRouter();
			//下拉框的状态
			const isShow = ref(false);
			//下拉框的文本
			const txt = ref([]);
			//跳转到搜索页面
			const toSearch = () => {
				router.push("/search");
				store.commit("changeSerachValue", searchValue.value)
			};
			return {
				searchValue,
				txt,
				isShow,
				toSearch,
			};
		},
	};
</script>

<style scoped>
	.logo {
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 10%;
	}

	.serach-nav {
		position: relative;
		height: 100px;
	}

	.serach-nav-box {
		display: flex;
		width: 1280px;
		margin: 0 auto;
	}

	.el-menu {
		border: none;
		margin: 0 auto;
		width: 750px;
		height: 100px;
	}

	.el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
	.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
		background: #ffffff;
		color: #000;
	}

	.el-menu--horizontal>.el-menu-item.is-active {
		color: #000 !important;
		border-bottom: none !important;
	}

	.serach-border {
		width: 20%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.serach-box {
		display: flex;
		width: 296px;
		height: 46px;
		border: 1px solid #ccc;
	}

	.search-input {
		width: 244px;
	}

	.search-input input {
		padding: 2;
		font-size: 15px;
		outline: none;
		height: 42px;
		border: none;
	}

	.el-button {
		width: 52px;
		border-radius: 0px;
		height: 46px;
		border-right: 0px;
		border-top: 0px;
		border-bottom: 0px;
	}

	.el-button:focus,
	.el-button:hover {
		background-color: #ff6700;
		color: #ffffff;
		outline: none;
	}

	.el-menu-item {
		width: 80px;
		padding: 0 10px;
	}

	.search-menu {
		width: 66%;
	}

	.down-menu {
		position: absolute;
		top: 100;
		z-index: 1999;
		width: 100%;
		height: 200px;
		background: #fff;
		border-top: 1px solid#ccc;
		box-shadow: 0px 1px 1px #888888;
	}

	.middle {
		display: flex;
		height: 100%;
	}

	.middle>div {
		padding-top: 10px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100px;
		line-height: 80px;
		cursor: pointer;
	}

	.down-menu-box {
		width: 1280px;
		margin: 0 auto;
		height: 100%;
	}

	.down-menu-box {
		display: flex;
		margin: 0 auto;
	}

	.down-menu-box div {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-left: 30px;
	}
</style>
